import React from 'react';
import { Card, Empty } from 'antd';
import ReactEcharts from '@/components/Echarts';
import Locale from '@/utils/locale';

const { locale } = new Locale('stat.report');

const getOption = data => {
    const option = {
        tooltip: {
            formatter: '{a}: {c}%'
        },
        legend: {
            y: 'bottom',
            data: data.map(item => item.leaveName)
        },
        xAxis: {
            show: false,
            type: 'category',
            data: ['Rate']
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                interval: 'auto',
                formatter: '{value}%'
            },
            splitNumber: 5,
            min: 0,
            max: 100
        },
        series: data.map(item => ({
            data: [item.rate],
            name: item.leaveName,
            type: 'bar',
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    formatter: '{c}%'
                }
            }
        }))
    };

    return option;
};

const CqlFx = ({ data }) => (
    <Card bordered={false} title={locale('qjlxfx')}>
        {!data || data.length === 0 ? (
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
        ) : (
            <ReactEcharts option={getOption(data)} />
        )}
    </Card>
);

export default CqlFx;
